<!DOCTYPE html>
<html>
<head>
<title>OSM Buildings - Shadows</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#map {
  height: 100%;
}
</style>
<link rel="stylesheet" href="leaflet-0.7/leaflet.css">
<script src="leaflet-0.7/leaflet-src.js"></script>
<script src="loader.js"></script>
<style>
#controls {
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:30px;
  text-align:center;
  background-color:#ffffff;
}
#controls label {
  font-family:sans-serif;
  font-size:14px;
  height: 20px;
}
</style>
</head>

<body>
<div id="map"></div>
<div id="controls">
  <input id="date" type="range" min="1" max="12" step="1"><label for="date"></label>
  <input id="time" type="range" min="0" max="23" step="0.25"><label for="time"></label>
</div>
<script>
var map = new L.Map('map').setView([52.52179, 13.39503], 18); // Berlin Bodemuseum

new L.TileLayer('https://{s}.tiles.mapbox.com/v3/osmbuildings.kbpalbpk/{z}/{x}/{y}.png', { maxNativeZoom: 19, maxZoom: 21 }).addTo(map);
var now = new Date(2017, 4, 10, 8, 0);
var osmb = new OSMBuildings(map).date(now).load();

function changeDate() {
  var
    Y = now.getFullYear(),
    M = now.getMonth(),
    D = 15,
    h = now.getHours(),
    m = now.getMinutes();

  timeRangeLabel.innerText = pad(h) + ':' + pad(m);
  dateRangeLabel.innerText = Y + '-' + pad(M+1);
  osmb.date(new Date(Y, M, D, h, m));
}

function pad(v) {
  return (v < 10 ? '0' : '') + v;
}

var date, time;
var timeRange = document.querySelector('#time');
var dateRange = document.querySelector('#date');
var timeRangeLabel = document.querySelector('label[for=time]');
var dateRangeLabel = document.querySelector('label[for=date]');

changeDate();

// init with day of year
var Jan1 = new Date(now.getFullYear(), 0, 1);
dateRange.value = now.getMonth()+1;

timeRange.value = now.getHours();

timeRange.addEventListener('change', function() {
  now.setHours(0);
  now.setMinutes(this.value*60);
  changeDate();
}, false);

dateRange.addEventListener('change', function() {
  now.setMonth(this.value-1);
  changeDate();
}, false);
</script>
</body>
</html>